<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 数据表格</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="../statics/hplus/favicon.ico"> <link href="../statics/hplus/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../statics/hplus/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">

    <!-- Data Tables -->
    <link href="../statics/hplus/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

    <link href="../statics/hplus/css/animate.min.css" rel="stylesheet">
    <link href="../statics/hplus/css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_blank">
    <link href="../statics/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">

    <!-- 流程图相关begin -->
    <link rel="stylesheet" href="../statics/plugins/jsplumb/jsplumbtoolkit-defaults.css">
    <link rel="stylesheet" href="../statics/plugins/jsplumb/jsplumbtoolkit-demo.css">
    <link rel="stylesheet" href="../statics/plugins/jsplumb/app.css">
    <!-- 流程图相关end -->

    <!-- 富文本相关begin -->
    <link href="../statics/hplus/css/plugins/summernote/summernote.css" rel="stylesheet">
    <link href="../statics/hplus/css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
    <!-- 富文本相关end -->

    <link href="../statics/hplus/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet">

    <style>
        .erdTable>tbody>tr>td{padding: 3px 8px}
        .table-bordered>tbody>tr>td{border: 1px solid #0c0c0c}
        .erdTable{color: #0c0c0c}
    </style>
</head>

<body class="gray-bg">

<!-- 流程图模板 -->
<script type="text/x-jtk-templates" src="../statics/plugins/jsplumb/templates.html"></script>

<div class="wrapper wrapper-content"><!--animated fadeInRight-->

    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-content mailbox-content">
                    <div class="file-manager">
                        <a class="btn btn-block btn-primary compose-mail" href="mail_compose.html">编辑/保存</a>
                        <div class="space-25"></div>
                        <h5>目录</h5>
                        <div id="treeview5" class="test"></div>
                        <h5>文件夹</h5>
                        <ul class="folder-list m-b-md" style="padding: 0">
                            <li>
                                <a href="mailbox.html"> <i class="fa fa-inbox "></i> 收件箱 <span class="label label-warning pull-right">16</span>
                                </a>
                            </li>
                            <li>
                                <a href="mailbox.html"> <i class="fa fa-envelope-o"></i> 发信</a>
                            </li>
                            <li>
                                <a href="mailbox.html"> <i class="fa fa-certificate"></i> 重要</a>
                            </li>
                            <li>
                                <a href="mailbox.html"> <i class="fa fa-file-text-o"></i> 草稿 <span class="label label-danger pull-right">2</span>
                                </a>
                            </li>
                            <li>
                                <a href="mailbox.html"> <i class="fa fa-trash-o"></i> 垃圾箱</a>
                            </li>
                        </ul>
                        <h5>分类</h5>
                        <ul class="category-list" style="padding: 0">
                            <li>
                                <a href="mail_compose.html#"> <i class="fa fa-circle text-navy"></i> 工作</a>
                            </li>
                            <li>
                                <a href="mail_compose.html#"> <i class="fa fa-circle text-danger"></i> 文档</a>
                            </li>
                            <li>
                                <a href="mail_compose.html#"> <i class="fa fa-circle text-primary"></i> 社交</a>
                            </li>
                            <li>
                                <a href="mail_compose.html#"> <i class="fa fa-circle text-info"></i> 广告</a>
                            </li>
                            <li>
                                <a href="mail_compose.html#"> <i class="fa fa-circle text-warning"></i> 客户端</a>
                            </li>
                        </ul>

                        <h5 class="tag-title">标签</h5>
                        <ul class="tag-list" style="padding: 0">
                            <li><a href="mail_compose.html"><i class="fa fa-tag"></i> 朋友</a>
                            </li>
                            <li><a href="mail_compose.html"><i class="fa fa-tag"></i> 工作</a>
                            </li>
                            <li><a href="mail_compose.html"><i class="fa fa-tag"></i> 家庭</a>
                            </li>
                            <li><a href="mail_compose.html"><i class="fa fa-tag"></i> 孩子</a>
                            </li>
                            <li><a href="mail_compose.html"><i class="fa fa-tag"></i> 假期</a>
                            </li>
                            <li><a href="mail_compose.html"><i class="fa fa-tag"></i> 音乐</a>
                            </li>
                            <li><a href="mail_compose.html"><i class="fa fa-tag"></i> 照片</a>
                            </li>
                            <li><a href="mail_compose.html"><i class="fa fa-tag"></i> 电影</a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9 animated fadeInRight">
            <div class="mail-box-header">
                <div class="pull-right tooltip-demo">
                    <a href="mail_compose.html" class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="回复"><i class="fa fa-reply"></i> 回复</a>
                    <a href="mail_detail.html#" class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="打印邮件"><i class="fa fa-print"></i> </a>
                    <a href="mailbox.html" class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="标为垃圾邮件"><i class="fa fa-trash-o"></i> </a>
                </div>
                <h2>
                    学生管理ERD
                </h2>
                <div class="mail-tools tooltip-demo m-t-md">
                    <h5>
                        <span class="font-noraml">创建人： 徐志摩</span>
                    </h5>
                    <h5>
                        <span class="font-noraml">创建时间： 2014年10月28日(星期二) 晚上8:20</span>
                    </h5>
                    <h5>
                        <span class="font-noraml">最后编辑人： 徐志摩</span>
                    </h5>
                    <h5>
                        <span class="font-noraml">最后编辑时间： 2014年10月28日(星期二) 晚上8:20</span>
                    </h5>
                </div>
            </div>
            <div class="mail-box">
                <div class="mail-body" id="20181004"></div>
                <div class="clearfix"></div>
            </div>
        </div>

        <!--<div class="col-sm-12">-->
            <!--<div class="ibox float-e-margins">-->
                <!--<div class="ibox-title">-->
                    <!--<h5>栅格设置</h5>-->
                    <!--<div class="ibox-tools">-->
                        <!--<a class="collapse-link">-->
                            <!--<i class="fa fa-chevron-up"></i>-->
                        <!--</a>-->
                        <!--<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">-->
                            <!--<i class="fa fa-wrench"></i>-->
                        <!--</a>-->
                        <!--<ul class="dropdown-menu dropdown-user">-->
                            <!--<li><a href="grid_options.html#">选项1</a>-->
                            <!--</li>-->
                            <!--<li><a href="grid_options.html#">选项2</a>-->
                            <!--</li>-->
                        <!--</ul>-->
                        <!--<a class="close-link">-->
                            <!--<i class="fa fa-times"></i>-->
                        <!--</a>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="ibox-content" id="20181004">-->

                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>范例-学生管理RRD</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="form_editors.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="form_editors.html#">选项1</a>
                            </li>
                            <li><a href="form_editors.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content no-padding">

                    <div class="summernote">

                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>栅格设置</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="grid_options.html#">选项1</a>
                            </li>
                            <li><a href="grid_options.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <div class="table-responsive">
                        <table class="table table-bordered table-striped erdTable" style="font-weight: bold;">
                            <tbody>
                            <tr  style="background-color: #C0C4CC">
                                <td colspan="5" class="text-center">表名</td>
                                <td colspan="1" class="text-center">备注</td>
                            </tr>
                            <tr>
                                <td colspan="5" class="text-center" style="font-size: 16px;">student</td>
                                <td colspan="1" class="text-center" style="font-size: 16px;">学生表</td>
                            </tr>
                            <tr style="background-color: #C0C4CC">
                                <td width="25%">字段名</td>
                                <td width="15%">类型</td>
                                <td width="10%">长度</td>
                                <td width="10%">可为空</td>
                                <td width="10%">默认值</td>
                                <td width="30%">备注</td>
                            </tr>
                            <tr>
                                <!--<td><code>.col-xs-</code></td>-->
                                <td>id</td>
                                <td>
                                    <select class="form-control" style="width: 130px;height: 20px;padding: 0 0 0 12px" name="account">
                                    <option>bigint</option>
                                    <option>varchar</option>
                                    <option>tinyint</option>
                                    <option>decimal</option>
                                    <option>datetime</option>
                                    <option>int</option>
                                    </select>
                                </td>
                                <td>20</td>
                                <td><select class="form-control" style="width: 130px;height: 20px;padding: 0 0 0 12px" name="account">
                                    <option>否</option>
                                    <option>是</option>
                                </select></td>
                                <td><select class="form-control" style="width: 130px;height: 20px;padding: 0 0 0 12px" name="account">
                                    <option></option>
                                    <option>Empty String</option>
                                    <option>0</option>
                                </select></td>
                                <td>主键</td>
                            </tr>
                            <tr>
                                <!--<td><code>.col-xs-</code></td>-->
                                <td>id</td>
                                <td>
                                    <select class="form-control" style="width: 130px;height: 20px;padding: 0 0 0 12px" name="account">
                                        <option>bigint</option>
                                        <option>varchar</option>
                                        <option>tinyint</option>
                                        <option>decimal</option>
                                        <option>datetime</option>
                                        <option>int</option>
                                    </select>
                                </td>
                                <td>20</td>
                                <td><select class="form-control" style="width: 130px;height: 20px;padding: 0 0 0 12px" name="account">
                                    <option>否</option>
                                    <option>是</option>
                                </select></td>
                                <td><select class="form-control" style="width: 130px;height: 20px;padding: 0 0 0 12px" name="account">
                                    <option></option>
                                    <option>Empty String</option>
                                    <option>0</option>
                                </select></td>
                                <td>主键</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>


                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>流程图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="grid_options.html#">选项1</a>
                            </li>
                            <li><a href="grid_options.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <div id="jtk-demo-flowchart" class="jtk-demo-main" style="width:100%;margin-top:-4px;">
                        <!-- the node palette -->
                        <div class="sidebar node-palette">
                            <ul>
                                <li jtk-node-type="question" title="Drag to add new">
                                    <i class="icon-tablet"></i>Question
                                </li>
                                <li jtk-node-type="action" title="Drag to add new">
                                    <i class="icon-eye-open"></i>Action
                                </li>
                                <li jtk-node-type="output" title="Drag to add new">
                                    <i class="icon-eye-open"></i>Output
                                </li>
                            </ul>
                        </div>

                        <!-- this is the main drawing area -->
                        <div class="jtk-demo-canvas">
                            <!-- controls -->
                            <div class="controls">
                                <i class="fa fa-arrows selected-mode" mode="pan" title="Pan Mode"></i>
                                <i class="fa fa-pencil" mode="select" title="Select Mode"></i>
                                <i class="fa fa-home" reset title="Zoom To Fit"></i>
                            </div>
                            <!-- miniview -->
                            <div class="miniview"></div>

                            <div style="position:absolute; bottom:20px;right:20px">
                                <a target="_blank" href="/docs/toolkit/demo-flowchart-builder.html" style="background-color: whitesmoke;padding:7px;">how was this app built?</a>
                            </div>
                        </div>

                        <!-- the current dataset -->
                        <div class="jtk-demo-dataset"></div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script src="../statics/hplus/js/jquery.min.js?v=2.1.4"></script>
<script src="../statics/hplus/js/bootstrap.min.js?v=3.3.5"></script>
<script src="../statics/hplus/js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="../statics/hplus/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="../statics/hplus/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="../statics/hplus/js/content.min.js?v=1.0.0"></script>
<script src="../statics/hplus/js/plugins/iCheck/icheck.min.js"></script>
<!--<script src="../statics/plugins/jsPlumb/jsPlumb.min.js"></script>-->

<!-- 流程图相关 begin -->
<script src="../statics/plugins/jsplumb/jsplumbtoolkit.js"></script>
<script src="../statics/plugins/jsplumb/syntax-highlighter.js"></script>
<script src="../statics/plugins/jsplumb/app.js"></script>
<!-- 流程图相关 end -->

<!-- 富文本相关 begin -->
<script src="../statics/hplus/js/plugins/summernote/summernote.min.js"></script>
<script src="../statics/hplus/js/plugins/summernote/summernote-zh-CN.js"></script>
<!-- 富文本相关 end -->
<script src="../statics/hplus/js/plugins/treeview/bootstrap-treeview.js"></script>
<script>
    var dbErd = {id:5927,title:'学生范例erd'};  //erd
    var dbHList = [                            //erd的目录 order by pid asc,id asc
        {id:1,pId:0,erdId:5927,title:'表设计',childList:[{id:4,pId:1,erdId:5927,title:'新增表'},{id:5,pId:1,erdId:5927,title:'修改表'}]},
        {id:2,pId:0,erdId:5927,title:'流程图',childList:[{id:6,pId:2,erdId:5927,title:'学生的增删改查',childList:[{id:8,pId:6,erdId:5927,title:'增'},{id:9,pId:6,erdId:5927,title:'删'}]},{id:7,pId:2,erdId:5927,title:'排名的计算'}]},
        {id:3,pId:0,erdId:5927,title:'功能设计'}
    ];
    // var dbHList = [                            //erd的目录 order by pid asc,id asc
    //     {id:1,pId:0,erdId:5927,title:'表设计'},
    //     {id:4,pId:1,erdId:5927,title:'新增表'},
    //     {id:5,pId:1,erdId:5927,title:'修改表'},
    //     {id:2,pId:0,erdId:5927,title:'流程图'},
    //     {id:6,pId:2,erdId:5927,title:'增删改查'},
    //     {id:7,pId:2,erdId:5927,title:'排名的计算'},
    //     {id:3,pId:0,erdId:5927,title:'功能设计'}
    // ];
    var widgetMap = {
    //目录下部件
    4:[{id:1,hId:4,erdId:5927,type:2,dataJson:{tableName:'student',comment:'学生表',columnList:[
                {columnName:'id',type:'bigint',length:'20',isNull:'not',defaultValue:'',comment:'主键'},
                {columnName:'id',type:'bigint',length:'20',isNull:'not',defaultValue:'',comment:'主键'}]}
    }],
    5:[{id:2,hId:5,erdId:5927,type:1,dataJson:{tableName:'student',comment:'学生表',columnList:[
                {columnName:'id',type:'bigint',length:'20',isNull:'not',defaultValue:'',comment:'主键'},
                {columnName:'id',type:'bigint',length:'20',isNull:'not',defaultValue:'',comment:'主键'}]}
    }],
    6:[{id:3,hId:6,erdId:5927,type:4,dataJson:{
            nodes:[
                {id:"start",type:"start",text:"Start",left:50,top:50,w:100,h:70},
                {id:"question1",type:"question",text:"Do Something?",left:290,top:79,w:150,h:150},
                {id:"decide",type:"action",text:"Make Decision",left:660,top:187,w:120,h:120},
                {id:"something",type:"output",text:"Do Something",left:827,top:414,w:120,h:50},
                {id:"question2",type:"question",text:"Do Nothing?",left:74,top:330,w:150,h:150},
                {"id":"nothing","type":"output","text":"Do Nothing","left":433,"top":558,"w":100,"h":50}
            ],
            "edges":[
                {"source":"start","target":"question1","data":{}},
                {"source":"question1","target":"decide","data":{"label":"yes","type":"connection"}},
                {"source":"question1","target":"question2","data":{"label":"no","type":"connection"}},
                {"source":"decide","target":"nothing","data":{"label":"Can't Decide","type":"connection"}},
                {"source":"decide","target":"something","data":{"label":"Decision Made","type":"connection"}},
                {"source":"question2","target":"decide","data":{"label":"no","type":"connection"}},
                {"source":"question2","target":"nothing","data":{"label":"yes","type":"connection"}}
            ],"ports":[],"groups":[]}
    }]
    //     ,
    // 7:[{id:4,hId:7,erdId:5927,type:4,dataJson:{
    //         nodes:[
    //             {id:"start",type:"start",text:"Start",left:50,top:50,w:100,h:70},
    //             {id:"question1",type:"question",text:"Do Something?",left:290,top:79,w:150,h:150},
    //             {id:"decide",type:"action",text:"Make Decision",left:660,top:187,w:120,h:120},
    //             {id:"something",type:"output",text:"Do Something",left:827,top:414,w:120,h:50},
    //             {id:"question2",type:"question",text:"Do Nothing?",left:74,top:330,w:150,h:150},
    //             {"id":"nothing","type":"output","text":"Do Nothing","left":433,"top":558,"w":100,"h":50}
    //         ],
    //         "edges":[
    //             {"source":"start","target":"question1","data":{}},
    //             {"source":"question1","target":"decide","data":{"label":"yes","type":"connection"}},
    //             {"source":"question1","target":"question2","data":{"label":"no","type":"connection"}},
    //             {"source":"decide","target":"nothing","data":{"label":"Can't Decide","type":"connection"}},
    //             {"source":"decide","target":"something","data":{"label":"Decision Made","type":"connection"}},
    //             {"source":"question2","target":"decide","data":{"label":"no","type":"connection"}},
    //             {"source":"question2","target":"nothing","data":{"label":"yes","type":"connection"}}
    //         ],"ports":[],"groups":[]}
    // }]
    };//1富文本 2表新增 3表修改 4流程图


    var dataTablesExample;

    //取参
    function getParam() {
        var param = {};

        var tableName = $("#tableName").val();
        if(tableName){
            param.tableName = tableName;
        }
        //
        // var bookTimeEnd = $("#bookTimeEnd").val();
        // if(bookTimeEnd){
        //     param.bookTimeEnd = bookTimeEnd;
        // }
        return param;
    }

    function timeToString(dateTime){
        if(dateTime==null){
            return "";
        }
        var date = new Date(dateTime);
        var Y = date.getFullYear();
        var M = (date.getMonth()+1)<10?("0"+(date.getMonth()+1)) : (date.getMonth()+1);
        var D = date.getDate()<10?("0"+date.getDate()) : date.getDate();
        var H = date.getHours()<10?("0"+date.getHours()) : date.getHours();
        var m = date.getMinutes()<10?("0"+date.getMinutes()) : date.getMinutes();
        var s = date.getSeconds()<10?("0"+date.getSeconds()) : date.getSeconds();
        return Y + '-' + M + '-' + D + " " + H + ":" + m + ":" + s;
    }

    var doSearch = function(){
        dataTablesExample = $(".dataTables-example").dataTable({
            serverSide : true,                                  //服务器
            lengthChange : false,                                //可以改变每页条数
            // lengthMenu : [10, 50, 100],                         //分页选项
            pagingType : "full_numbers",						//翻页按钮类型
            searching : false,                                  //关闭本地搜索
            ordering : false,                                   //关闭本地排序
            autoWidth : false,                                  //关闭自适应宽度
            destroy : true,                                     //方便第二次加载
            // language : languageConfig,
            ajax : {
                type : "post",
                url : '/codeGen/getTableList',
                data : function(param){                         //入参
                    $.extend(true, param, getParam())
                },
                dataSrc : function (result) {                   //返参
                    return result.data;
                }
            },
            columns : [
                {data: null},
                {data: null},
                {data: null},
                {data: null},
                {data: null},
                {data: null}
            ],
            columnDefs : [
                {targets : 0, width : '5%', className : 'text-center',                 //
                    render : function(data, type, row, meta) {
                        var str= '';
                        str += '<div class="checkbox i-checks"><label><input type="checkbox"> <i></i></label></div>';
                        return str;
                    }
                },
                {targets : 2, width : '20%', className : 'text-center',                 //
                    render : function(data, type, row, meta) {
                        return row.dbName;
                    }
                },
                {targets : 3, width : '25%', className : 'text-center',                 //
                    render : function(data, type, row, meta) {
                        return row.tableName;
                    }
                },
                {targets : 4, width : '25%', className : 'text-center',                 //
                    render : function(data, type, row, meta) {
                        return row.tableDesc;
                    }
                },
                {targets : 5, width : '20%', className : 'text-center',                 //
                    render : function(data, type, row, meta) {
                        return timeToString(row.createTime);
                    }
                }
                // ,
                // {targets : 5, width : '20%', className : 'text-center',                 //操作
                //     render : function (data, type, row, meta){
                //         var str= '';
                //         str += '<button class="btn btn-xs btn-success" onclick="">导出</button>';
                //         str += '<button class="btn btn-xs btn-success" onclick="" style="margin-left: 10px">下载日志</button>';
                //         return str;
                //     }
                // }
            ],
            fnDrawCallback : function(){
                this.api().column(1).nodes().each(function(cell, i) {
                    cell.innerHTML = '<div class="text-center">' + (i + 1) + '</div>';
                });
                $(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green"});
            }
        });
    };
    $(document).ready(function(){
        
        $("#searchBtn").click(function () {
            doSearch();
        });

        doSearch();

        // jsPlumb.ready(function() {
        //     var firstInstance = jsPlumb.getInstance();
        //     firstInstance.importDefaults({
        //         Connector : [ "Bezier", { curviness: 150 } ],//连接器类型
        //         Anchors : [ "TopCenter", "BottomCenter" ]//锚点位置
        //     });
        //
        //     firstInstance.connect({
        //         source:"element1",//源端点
        //         target:"element2",//目标端点
        //         scope:"someScope" //可拖拽范围
        //     });
        // });

        // var edit=function(){
        //     $("#eg").addClass("no-padding");
        //     $(".click2edit").summernote({lang:"zh-CN",focus:true})
        // };
        // var save=function(){
        //     $("#eg").removeClass("no-padding");
        //     var aHTML=$(".click2edit").code();
        //     $(".click2edit").destroy()
        // };


        render(deep,dbHList);

        $(".summernote").summernote({lang:"zh-CN"});

        // $(function(){
            var e=[{text:"父节点 1",href:"#parent1",tags:["4"],nodes:[{text:"子节点 1",href:"#child1",tags:["2"],nodes:[{text:"孙子节点 1",href:"#grandchild1",tags:["0"]},{text:"孙子节点 2",href:"#grandchild2",tags:["0"]}]},{text:"子节点 2",href:"#child2",tags:["0"]}]},{text:"父节点 2",href:"#parent2",tags:["0"]},{text:"父节点 3",href:"#parent3",tags:["0"]},{text:"父节点 4",href:"#parent4",tags:["0"]},{text:"父节点 5",href:"#parent5",tags:["0"]}],
                o=[{text:"父节点 1",tags:["2"],nodes:[{text:"子节点 1",tags:["3"],nodes:[{text:"孙子节点 1",tags:["6"]},{text:"孙子节点 2",tags:["3"]}]},{text:"子节点 2",tags:["3"]}]},{text:"父节点 2",tags:["7"]},{text:"父节点 3",icon:"glyphicon glyphicon-earphone",href:"#demo",tags:["11"]},{text:"父节点 4",icon:"glyphicon glyphicon-cloud-download",href:"/demo.html",tags:["19"],selected:!0},{text:"父节点 5",icon:"glyphicon glyphicon-certificate",color:"pink",backColor:"red",href:"http://www.tesco.com",tags:["available","0"]}],
                t='[{"text": "父节点 1","nodes": [{"text": "子节点 1","nodes": [{"text": "孙子节点 1"},{"text": "孙子节点 2"}]},{"text": "子节点 2"}]},{"text": "父节点 2"},{"text": "父节点 3"},{"text": "父节点 4"},{"text": "父节点 5"}]';

            // $("#treeview1").treeview({data:e}),
            //     $("#treeview2").treeview({levels:1,data:e}),
            //     $("#treeview3").treeview({levels:99,data:e}),
            //     $("#treeview4").treeview({color:"#428bca",data:e}),
                $("#treeview5").treeview({color:"#428bca",expandIcon:"glyphicon glyphicon-chevron-right",collapseIcon:"glyphicon glyphicon-chevron-down",nodeIcon:"glyphicon glyphicon-bookmark",data:e});
                // $("#treeview6").treeview({color:"#428bca",expandIcon:"glyphicon glyphicon-stop",collapseIcon:"glyphicon glyphicon-unchecked",nodeIcon:"glyphicon glyphicon-user",showTags:!0,data:e}),
                // $("#treeview7").treeview({color:"#428bca",showBorder:!1,data:e}),
                // $("#treeview8").treeview({expandIcon:"glyphicon glyphicon-stop",collapseIcon:"glyphicon glyphicon-unchecked",nodeIcon:"glyphicon glyphicon-user",color:"yellow",backColor:"purple",onhoverColor:"orange",borderColor:"red",showBorder:!1,showTags:!0,highlightSelected:!0,selectedColor:"yellow",selectedBackColor:"darkorange",data:e}),
                // $("#treeview9").treeview({expandIcon:"glyphicon glyphicon-stop",collapseIcon:"glyphicon glyphicon-unchecked",nodeIcon:"glyphicon glyphicon-user",color:"yellow",backColor:"purple",onhoverColor:"orange",borderColor:"red",showBorder:!1,showTags:!0,highlightSelected:!0,selectedColor:"yellow",selectedBackColor:"darkorange",data:o}),
                // $("#treeview10").treeview({color:"#428bca",enableLinks:!0,data:e}),
                // $("#treeview11").treeview({color:"#428bca",data:e,onNodeSelected:function(e,o){$("#event_output").prepend("<p>您单击了 "+o.text+"</p>")}}),
                // $("#treeview12").treeview({data:t})});
    });

    var deep = 1;
    var num1 = 1,num2 = 1,num3 = 1;
    function render(deep,list) {//deep几级标题 list列表
        $.each(list, function (index,value) {

            var num = '';
            if(deep === 1){
                num += num1;
                $("#20181004").append('<h2 style="font-weight: 500">'+num+" "+value.title+'</h2><hr>');
                if(!!value.childList){
                    render(deep+1, value.childList);
                }
                num1++;
            }else if(deep === 2){
                num += (num1 + '.' + num2);
                $("#20181004").append('<h3 style="font-weight: 500">'+num+" "+value.title+'</h3><hr>');
                //widgetMap
                if(!!widgetMap[value.id]){
                    $.each(widgetMap[value.id],function (index1,value1) {
                        if(value1.type === 1){//1富文本 2表新增 3表修改 4流程图
                            $("#20181004").append('<div class="summernote"></div>');
                        }else if(value1.type === 2){
                            $("#20181004").append('<div class="table-responsive">\n' +
                                '                        <table class="table table-bordered table-striped erdTable" style="font-weight: bold;">\n' +
                                '                            <tbody>\n' +
                                '                            <tr  style="background-color: #C0C4CC">\n' +
                                '                                <td colspan="5" class="text-center">表名</td>\n' +
                                '                                <td colspan="1" class="text-center">备注</td>\n' +
                                '                            </tr>\n' +
                                '                            <tr>\n' +
                                '                                <td colspan="5" class="text-center" style="font-size: 16px;">student</td>\n' +
                                '                                <td colspan="1" class="text-center" style="font-size: 16px;">学生表</td>\n' +
                                '                            </tr>\n' +
                                '                            <tr style="background-color: #C0C4CC">\n' +
                                '                                <td width="25%">字段名</td>\n' +
                                '                                <td width="15%">类型</td>\n' +
                                '                                <td width="10%">长度</td>\n' +
                                '                                <td width="10%">可为空</td>\n' +
                                '                                <td width="10%">默认值</td>\n' +
                                '                                <td width="30%">备注</td>\n' +
                                '                            </tr>\n' +
                                '                            <tr>\n' +
                                '                                <!--<td><code>.col-xs-</code></td>-->\n' +
                                '                                <td>id</td>\n' +
                                '                                <td>\n' +
                                '                                    <select class="form-control" style="width: 100px;height: 20px;padding: 0 0 0 12px" name="account">\n' +
                                '                                    <option>bigint</option>\n' +
                                '                                    <option>varchar</option>\n' +
                                '                                    <option>tinyint</option>\n' +
                                '                                    <option>decimal</option>\n' +
                                '                                    <option>datetime</option>\n' +
                                '                                    <option>int</option>\n' +
                                '                                    </select>\n' +
                                '                                </td>\n' +
                                '                                <td>20</td>\n' +
                                '                                <td><select class="form-control" style="width: 60px;height: 20px;padding: 0 0 0 12px" name="account">\n' +
                                '                                    <option>否</option>\n' +
                                '                                    <option>是</option>\n' +
                                '                                </select></td>\n' +
                                '                                <td><select class="form-control" style="width: 130px;height: 20px;padding: 0 0 0 12px" name="account">\n' +
                                '                                    <option></option>\n' +
                                '                                    <option>Empty String</option>\n' +
                                '                                    <option>0</option>\n' +
                                '                                </select></td>\n' +
                                '                                <td>主键</td>\n' +
                                '                            </tr>\n' +
                                '                            <tr>\n' +
                                '                                <!--<td><code>.col-xs-</code></td>-->\n' +
                                '                                <td>id</td>\n' +
                                '                                <td>\n' +
                                '                                    <select class="form-control" style="width: 100px;height: 20px;padding: 0 0 0 12px" name="account">\n' +
                                '                                        <option>bigint</option>\n' +
                                '                                        <option>varchar</option>\n' +
                                '                                        <option>tinyint</option>\n' +
                                '                                        <option>decimal</option>\n' +
                                '                                        <option>datetime</option>\n' +
                                '                                        <option>int</option>\n' +
                                '                                    </select>\n' +
                                '                                </td>\n' +
                                '                                <td>20</td>\n' +
                                '                                <td><select class="form-control" style="width: 60px;height: 20px;padding: 0 0 0 12px" name="account">\n' +
                                '                                    <option>否</option>\n' +
                                '                                    <option>是</option>\n' +
                                '                                </select></td>\n' +
                                '                                <td><select class="form-control" style="width: 130px;height: 20px;padding: 0 0 0 12px" name="account">\n' +
                                '                                    <option></option>\n' +
                                '                                    <option>Empty String</option>\n' +
                                '                                    <option>0</option>\n' +
                                '                                </select></td>\n' +
                                '                                <td>主键</td>\n' +
                                '                            </tr>\n' +
                                '                            </tbody>\n' +
                                '                        </table>\n' +
                                '                    </div>');
                        }else if(value1.type === 3){
                            $("#20181004").append('表修改');
                        }else if(value1.type === 4){
                            $("#20181004").append('<div id="jtk-demo-flowchart" class="jtk-demo-main" style="width:100%;margin-top:-4px;">\n' +
                                '                        <!-- the node palette -->\n' +
                                '                        <div class="sidebar node-palette">\n' +
                                '                            <ul>\n' +
                                '                                <li jtk-node-type="question" title="Drag to add new">\n' +
                                '                                    <i class="icon-tablet"></i>Question\n' +
                                '                                </li>\n' +
                                '                                <li jtk-node-type="action" title="Drag to add new">\n' +
                                '                                    <i class="icon-eye-open"></i>Action\n' +
                                '                                </li>\n' +
                                '                                <li jtk-node-type="output" title="Drag to add new">\n' +
                                '                                    <i class="icon-eye-open"></i>Output\n' +
                                '                                </li>\n' +
                                '                            </ul>\n' +
                                '                        </div>\n' +
                                '\n' +
                                '                        <!-- this is the main drawing area -->\n' +
                                '                        <div class="jtk-demo-canvas">\n' +
                                '                            <!-- controls -->\n' +
                                '                            <div class="controls">\n' +
                                '                                <i class="fa fa-arrows selected-mode" mode="pan" title="Pan Mode"></i>\n' +
                                '                                <i class="fa fa-pencil" mode="select" title="Select Mode"></i>\n' +
                                '                                <i class="fa fa-home" reset title="Zoom To Fit"></i>\n' +
                                '                            </div>\n' +
                                '                            <!-- miniview -->\n' +
                                '                            <div class="miniview"></div>\n' +
                                '\n' +
                                '                            <div style="position:absolute; bottom:20px;right:20px">\n' +
                                '                                <a target="_blank" href="/docs/toolkit/demo-flowchart-builder.html" style="background-color: whitesmoke;padding:7px;">how was this app built?</a>\n' +
                                '                            </div>\n' +
                                '                        </div>\n' +
                                '\n' +
                                '                        <!-- the current dataset -->\n' +
                                '                    </div>');
                        }
                    });
                }
                if(!!value.childList){
                    render(deep+1, value.childList);
                }
                num2++;
            }else if(deep === 3){
                num += (num1 + '.' + num2 + '.' + num3);
                $("#20181004").append('<h4 style="font-weight: 500">'+num+" "+value.title+'</h4><hr>');
                if(!!value.childList){
                    render(deep+1, value.childList);
                }
                num3++;
            }

            // if(!!value.childList){
            //     render(deep+1, value.childList);
            // }else {
            //     return false;
            // }
        });
    }
</script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>

</body>

</html>